<template lang="">
  <el-dialog :visible="dialogFormVisible1" title="分配权限" @close="Cancelbtn">
    <el-checkbox-group v-model="checkList">
      <el-checkbox v-for="item in List" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
    </el-checkbox-group>
    <template slot="footer">
      <el-row type="flex" justify="center">
        <el-button style="width: 80px; height: 40px;" @click="Cancelbtn">取消</el-button>
        <el-button type="primary" style="width: 80px; height: 40px;" @click="confirmBtn">确认</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
  import { getRoleListAPI, getEmployeeInfoAPI, assignEmployeeAPI } from '@/api'
  export default {
    props: {
      dialogFormVisible1: {
        type: Boolean,
        default: false
      },
      userId: {
        default: null
      }
    },
    data () {
      return {
        List: [],
        checkList: []
      }
    },
    created () {
      this.getEmployeeInfo()
      this.getRoleList()
    },
    methods: {
      // 首先获取角色
      async getRoleList () {
        const { rows } = await getRoleListAPI({ page: 1, size: 20 })
        this.List = rows
      },
      async getEmployeeInfo () {
        const { roleIds } = await getEmployeeInfoAPI(this.userId)
        this.checkList = roleIds
      },
      // 点击取消
      Cancelbtn () {
        this.$emit('update:dialogFormVisible1', false)
      },
      // 提交时给员工分配角色
      async confirmBtn () {
        await assignEmployeeAPI({ id: this.userId, roleIds: this.checkList })
        this.Cancelbtn()
      }
    },
  }
</script>
<style lang="">

</style>